<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
		<link rel="stylesheet" href="../../../css/common.css" media="all">
	</head>

	<body>
		<div class="layui-fluid">
			<div class="layui-card">
				<div class="layui-card-body">
					<div class="layui-row layui-col-space15">
						<div class="layui-btn-sm12 layui-col-md12 layui-col-xs12">
							<!-- 搜索 -->
							<form class="layui-form search" id="form" onsubmit="return false" action="##">

                                <div class="layui-inline search_inline">
                                    <label class="layui-form-label">时间段：</label>
                                    <div class="layui-input-inline" style="width: 300px;">
                                        <input class="layui-input" id="choosetime" placeholder="时间段" autocomplete="off"
                                            value="">
                                        <input class="layui-input" type="text" id="starttime" value="" name="starttime"
                                            placeholder="" autocomplete="off" style="display: none;">
                                        <input class="layui-input" type="text" id="endtime" value="" name="endtime"
                                            placeholder="" autocomplete="off" style="display: none;">
                                    </div>
                                </div>

								<div class="layui-inline search_inline">
									<label class="layui-form-label">店铺名称：</label>
									<div class="layui-input-inline">
										<input class="layui-input" lay-verify="" name="shopname" placeholder="店铺名称"
											autocomplete="off">
									</div>
								</div>
                                <div class="layui-form-item layui-inline">
                                    <label class="layui-form-label">区域</label>
                                    <div class="layui-input-inline" style="width: 120px;">
                                        <select id="provId" lay-filter="areaChange" lay-data="{chidrenId: 'areaId'}"></select>
                                    </div>
                                    <div class="layui-input-inline" style="width: 120px;">
                                        <select id="areaId" lay-filter="areaChange" lay-data="{chidrenId: 'districtId'}"></select>
                                    </div>
                                    <div class="layui-input-inline" style="width: 120px;">
                                        <select id="districtId"></select>
                                    </div>
                                </div>
								<button class="layui-btn search_inline" lay-submit="" lay-filter="search" data-type="reload">搜索</button>
								<button class="layui-btn layui-btn-primary search_inline" type="reset">重置</button>
							</form>
							<!-- 搜索 -->
							<table id="test-table-operate" lay-filter="test-table-operate"></table>
						</div>
					</div>
				</div>

			</div>

			<script type="text/html" id="zizeng">
			{{d.LAY_TABLE_INDEX+1}}
			</script>

			<script src="../../../layuiadmin/layui/layui.js"></script>
			<script src="../../../js/common.js" type="text/javascript" charset="utf-8"></script>
			<script>
				layui.config({
					base: '../../../layuiadmin/' //静态资源所在路径
				}).extend({
					index: 'lib/index' //主入口模块
				}).use(['index', 'table', 'tree', 'laydate'], function() {
					var $ = layui.$,
						form = layui.form,
						tree = layui.tree,
                        laydate = layui.laydate,
						table = layui.table;

                        laydate.render({
                            elem: '#choosetime',
                            type: 'datetime',
                            range: true,
                            value: '',  // 将默认日期设为空字符串
                            done: function (value, date) {
                                $('input[name=starttime]').val(value.split(' - ')[0]);
                                $('input[name=endtime]').val(value.split(' - ')[1]);
                            }
                        });

                    var topAreaId = '', provData = [], areaData = [], districtData = []
					var _data = {
                        area_id: ''
					};
                    queryAgentInfo()
                    function queryAgentInfo() {
                        $.get(server.sys_agent_info_query, {memberid: cookie.GetCookie('shop_memberid')}, function(res, status) {
                            if (status == 'success') {
                                if (res.code == 0) {
                                    topAreaId = res.shop_agent_apply.data.area_id
                                    initdata();
                                    queryAreaInfo()
                                } else {
                                    layer.msg(res.msg);
                                }
                                closeloading();
                            } else {
                                closeloading();
                                layer.msg('服务器连接错误');
                            }
                        });
                    }

					//用户管理
					function initdata() {
                        console.log(getSelectedAreaId());
                        _data['area_id'] = getSelectedAreaId() || topAreaId
                        console.log(_data);
						table.render({
							elem: '#test-table-operate',
							url: server.sys_agent_shop_trans_query,
							height: 'full-150',
							//totalRow: true,
							cols: [
								[{
									width: 50,
									field: 'zizeng',
									title: '#',
									fixed: 'left',
									templet: '#zizeng'
								}, 
								{
									field: 'sub_shopname',
									width: 200,
									title: '店铺名称'
								}, 
                                {
									field: 'sub_shopid',
									width: 120,
									title: '编号'
								},
								{
									field: 'pay_price',
									width: 120,
									title: '支付金额'
								},
                                {
									field: 'pay_time',
									width: 160,
									title: '支付时间',
								}]
							],
							page: false,
							where: _data,
							limit: limit,
							limits: limits,
							request: {
								pageName: 'page',
								limitName: 'size',
							},
							parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
								return {
									"code": res.code, //解析接口状态
									"msg": res.msg, //解析提示文本
									// "count": res.transData.pager.total, //解析数据长度
									"data": res.transData.data //解析数据列表
								};
							}
						});
					}

					function queryAreaInfo() {
                        $.get(server.sys_area_list, {id: topAreaId}, function(res, status) {
                            console.log(res);
                            if (status == 'success') {
                                if (res.code == 0) {
                                    processAreaData(res.area_list.data)
                                } else {
                                    layer.msg(res.msg);
                                }
                            } else {
                                layer.msg('服务器连接错误');
                            }
                        });
                    }

                    function processAreaData(resAreaData) {
                        var keyProv = [], keyArea = [], keyDistrict = []
                        $.each(resAreaData, function(index, item) {
                            if (keyProv.indexOf(item.prov_id) < 0) {
                                provData.push({
                                    id: item.prov_id,
                                    pid: 0,
                                    name: item.prov_name
                                })
                                keyProv.push(item.prov_id)
                            }

                            if (keyArea.indexOf(item.area_id) < 0) {
                                areaData.push({
                                    id: item.area_id,
                                    pid: item.prov_id,
                                    name: item.area_name
                                })
                                keyArea.push(item.area_id)
                            }

                            if (keyDistrict.indexOf(item.district_id) < 0) {
                                districtData.push({
                                    id: item.district_id,
                                    pid: item.area_id,
                                    name: item.district_name
                                })
                                keyProv.push(item.district_id)
                            }
                        })
                        appendToOptionItem('provId', 0)
                    }

                    function appendToOptionItem(selectId, pid) {
                        console.log(selectId + '||' + pid);
                        $('#' + selectId).empty()
                        var loopData = [], nextLoadId = ''
                        if (selectId === 'provId') {
                            loopData = provData
                            nextLoadId = 'areaId'
                        } else if (selectId === 'areaId') {
                            loopData = areaData
                            nextLoadId = 'districtId'
                        } else {
                            loopData = districtData
                        }
                        console.log(loopData);
                        var hasEmptyOption = 0
                        $.each(loopData, function(index, item) {
                            if (item.pid === pid) {
                                $('#' + selectId).append('<option value="' + item.id + '">' + item.name + '</option>')
                                hasEmptyOption++;
                            }
                        })
                        if (hasEmptyOption > 1) {
                            $('#' + selectId).prepend('<option value="" selected>请选择</option>')
                        } else {
                            $('#' + selectId).selectedIndex = 1
                        }
                        if (selectId !== 'districtId') {
                            appendToOptionItem(nextLoadId, $('#' + selectId).val())
                        } else {
                            form.render()
                        }
                    }

                    function getSelectedAreaId() {
                        console.log($('#areaId').find("option:selected").val());
                        if ($('#districtId').find("option:selected").val()) {
                            return $('#districtId').find("option:selected").val()
                        }

                        if ($('#areaId').find("option:selected").val()) {
                            return $('#areaId').find("option:selected").val()
                        }

                        if ($('#provId').find("option:selected").val()) {
                            return $('#provId').find("option:selected").val()
                        }
                    }

                    form.on('select(areaChange)', function(obj){
                        console.log(obj);
                        console.log(obj.elem.id);
                        if (obj.elem.id === 'areaId') {
                            appendToOptionItem('districtId', obj.value)
                        }

                        if (obj.elem.id === 'provId') {
                            appendToOptionItem('areaId', obj.value)
                        }
                    });
                    
                    //监听搜索
					form.on('submit(search)', function(data) {
						Object.assign(_data, data.field)
						initdata();
						return false;
					});

					$("button[type=reset]").on("click", function() {
						_data = {}
						initdata();
						document.getElementById("form").reset();
					});

				});
			</script>
	</body>

</html>
